<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人账户</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>个人账户 —— 操作菜单</small>
                </h1>
                <ul>
                    <li>
                        <a>余额显示</a>
                    </li>
                    <li>
                        <input type="hidden" id="userId" name="userId" value="${user.userId}"/>
                        <!--在导航栏显示余额-->
                        <p><span id="mon1">${user.balance}</span>元</p>
                    </li>
                    <li>
                        <div>
                            <button id="refreshMoneyBtn" type="button" class="btn btn-primary">刷新余额</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 column">
            <button id="saveMoneyBtn" class="btn btn-primary" type="button" >存款</button>
            <input id="depositMoney" type="text" name="depositMoney" placeholder="请输入存款金额"/>
            <br/>
            <br/>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 column">
            <button id="withdrawalsBtn" class="btn btn-primary" type="button" >取款</button>
            <input id="withdrawalsMoney" type="text" name="withdrawalsMoney" placeholder="请输入取款金额"/>
            <br/>
            <br/>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 column">
            <button id="transferBtn" class="btn btn-primary" type="button" >转账</button>
            <input id="transferUserName" type="text" name="transferUserName" placeholder="请输入转账人"/>
            <input id="transferMoney" type="text" name="transferMoney" placeholder="请输入转账金额"/>
            <br/>
            <br/>
        </div>
    </div>


    <div class="row">
        <div class="col-md-4 column">
<%--            <button id="findLogsBtn" class="btn btn-primary" type="button" >查询操作明细</button>--%>
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/user/allLog?id=${user.userId}">查询操作明细</a>
        </div>
    </div>

<%--    <div class="row clearfix">--%>
<%--        <div class="col-md-12 column">--%>
<%--            <table class="table table-hover table-striped">--%>
<%--                <thead>--%>
<%--                <tr>--%>
<%--                    <th>日志编号</th>--%>
<%--                    <th>操作类型</th>--%>
<%--                    <th>操作金额</th>--%>
<%--                    <th>用户编号</th>--%>
<%--&lt;%&ndash;                    <th>操作</th>&ndash;%&gt;--%>
<%--                </tr>--%>
<%--                </thead>--%>

<%--                <tbody>--%>
<%--                <c:forEach var="log" items="${requestScope.logList}">--%>
<%--                    <tr>--%>
<%--                        <td>${log.logId}</td>--%>
<%--                        <td>${log.logType}</td>--%>
<%--                        <td>${log.logAmount}</td>--%>
<%--                        <td>${log.userId}</td>--%>
<%--&lt;%&ndash;                        <td>&ndash;%&gt;--%>
<%--&lt;%&ndash;                            <a href="${pageContext.request.contextPath}/user/toUpdateUser?id=${user.userId}">更改</a> |&ndash;%&gt;--%>
<%--&lt;%&ndash;                            <a href="${pageContext.request.contextPath}/user/doDeleteUser?id=${user.userId}">删除</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;                        </td>&ndash;%&gt;--%>
<%--                    </tr>--%>
<%--                </c:forEach>--%>
<%--                </tbody>--%>
<%--            </table>--%>
<%--        </div>--%>
<%--    </div>--%>


</div>

<!--字节跳动jquery压缩版引用地址: （速度快推荐！）-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    // 刷新余额方法
    function refreshMoneyMethod() {
        //取出隐藏域中的userId
        var userId =$("#userId").val();

        $.ajax({
            // 请求地址
            url: "user/refreshMoney",
            // 请求类型
            type: "GET",
            // 请求参数
            data: {
                userId: userId
            },
            // 请求成功回调的方法，参数data用来接收后端返回值
            success: function (data) {
                if (data != null){
                    //回显后端返回的数据
                    $("#mon1").html(data);
                    //浏览器控制台打印data
                    console.log(data);
                }else {
                    alert(data);
                }
            },
            // 请求失败的回调方法
            error: function () {
                alert("客户端请求错误");
            }
        });
    }

    //刷新余额按钮
    $('#refreshMoneyBtn').click(function () {//给刷新按钮设置click函数，在改函数内发起AJAX请求
        refreshMoneyMethod();
    });

    //存款
    $("#saveMoneyBtn").click(function () {
        var depositMoney = $("#depositMoney").val();
        var userId = $("#userId").val();
        $.ajax({
           url: "user/depositMoney",
           type: "POST",
           data: {
               userId : userId,
               depositMoney : depositMoney
           },
           success: function (data) {
               if (data.toString().includes("true")){
                   //存款成功后，调用上面封装的刷新余额的方法
                   refreshMoneyMethod();
                   alert("存款成功！");
               }else {
                   alert("存款失败！");
               }
           },
           error: function () {
                alert("客户端请求错误");
           }
        });
    });

    //取款
    $("#withdrawalsBtn").click(function () {
        var withdrawalsMoney = $("#withdrawalsMoney").val();
        var userId = $("#userId").val();
        $.ajax({
            url: "user/withdrawalsMoney",
            type: "POST",
            data: {
                userId : userId,
                withdrawalsMoney : withdrawalsMoney
            },
            success: function (data) {
                if (data.toString().includes("true")){
                    //取款成功后，调用上面封装的刷新余额的方法
                    refreshMoneyMethod();
                    alert("取款成功！");
                }else {
                    alert("取款失败！");
                }
            },
            error: function () {
                alert("客户端请求错误");
            }
        });
    });

    //转账
    $("#transferBtn").click(function () {
        var userId = $("#userId").val();
        var transferMoney = $("#transferMoney").val();
        var transferUserName = $("#transferUserName").val();
        $.ajax({
            url: "user/transfer",
            type: "POST",
            data: {
                userId : userId,
                transferUserName : transferUserName,
                transferMoney : transferMoney
            },
            success: function (data) {
                // alert(data);
                // alert(data.toString().includes("true"));
                if (data.toString().includes("true")){
                    //存款成功后，调用上面封装的刷新余额的方法
                    refreshMoneyMethod();
                    alert("转账成功！");
                }else {
                    refreshMoneyMethod();
                    alert("转账失败！");
                }
            },
            error: function () {
                alert("客户端请求错误");
            }
        });
    });


</script>
</body>
</html>
